<script lang="ts">
export default {
  name: "xt-cascader",
};
</script>

<script setup lang="ts">
import { computed, ref } from "vue";
import { ElCascader } from "element-plus";
import Typings from "../../../typings";

interface Props {
  options: Typings.Common.option[];
  props?: Typings.Common.plainObj;
  clearable?: boolean;
  popperClass?: string;
  placeholder?: string;
  filterable?: boolean;
}

withDefaults(defineProps<Props>(), {
  options: () => [],
  props: () => ({}),
  clearable: true,
  popperClass: "",
  placeholder: "请选择",
  filterable: true,
});

const emit = defineEmits(["change"]);

const instanceRef = ref<InstanceType<typeof ElCascader>>();
const getInstance = computed(() => instanceRef.value);

const handleChange = (data) => {
  emit("change", data, instanceRef.value);
};

defineExpose({
  instance: getInstance,
});
</script>

<template>
  <el-cascader
    ref="instanceRef"
    class="xt-cascader"
    :options="options"
    :props="{ label: 'name', value: 'code', ...props }"
    :clearable="clearable"
    :filterable="filterable"
    :popperClass="`xt-cascader-popper ${popperClass}`"
    :placeholder="placeholder"
    @change="handleChange"
  >
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-cascader>
</template>

<style lang="scss">
@use "../../../scss/xt-cascader.scss";
</style>
